<template>
  <div>
    <h1 ref="h2">模板ref使用</h1>
    <ul>
      <li ref="li">我是li</li>
    </ul>
    <button @click="perDom">操作DOM</button>
    <hr />
    <Child ref="child" />
    <button @click="invokeChildFn">调用子组件的方法</button>
  </div>
</template>

<script>
/**
 * **实现步骤**
1. 使用ref函数传入null创建 ref对象 =>  `const 常量名称 = ref(null)` (关键)
2. 模板中通过定义ref属性等于1中创建的ref对象常量名称建立关联  =>  `<h1 ref="常量名称"></h1>`
3. setup函数中**必须返回**：`return {常量名称}`
4. 使用 => `常量名称.value`
 */
import Child from './components/child.vue'
import { ref, onMounted } from 'vue'
export default {
  components: {
    Child
  },
  setup () {
    // 1. 获取DOM对象
    const h2 = ref()
    // 获取li
    const li = ref()

    // 2. 获取子组件实例
    const child = ref()
    // 使用场景：调用子组件的方法
    const invokeChildFn = () => {
      console.log(child.value, child.value.childFn2, child.value.childFn)
      child.value.childFn2()
    }

    // 使用场景：操作DOM
    const perDom = () => {
      h2.value.style.color = 'red'
    }

    onMounted(() => {
      console.log('vue3:', h2.value, li.value, child.value)
    })

    return { h2, li, perDom, child, invokeChildFn }
  },
  // vue2获取ref的值：1. dom对象 2. 组件实例
  mounted () {
    this.$refs.child.childFn()
    console.log('vue2:', this.$refs)
  }
}
</script>

<style lang="scss" scoped>
</style>
